<!DOCTYPE HTML>
<html>
<head>
<title>Canvas Uses CALayerOverlay Test</title>

<script>
// '--enable-gpu-benchmarking' is required for this test.

// Diagnostics:
// * Page is blank: something fundamental is broken with workers,
//   OffscreenCanvas, ImageBitmap, or ImageBitmapRendering context.
//   Check the console output.
// * Black square: You probably forgot to run with the
//   --enable-gpu-benchmarking flag or
//   addCoreAnimationStatusEventListener failed for some reason.
// * Red square: Test failed, CALayerOverlay is not being used.
// * Green square: Test passed, CALayerOverlay is being used.
// * None of the above: You're in big trouble!

async function main() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('bitmaprenderer');
  const bg_canvas = new OffscreenCanvas(canvas.width, canvas.height);
  const bg_ctx = bg_canvas.getContext('2d');

  bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
  bg_ctx.fillStyle = "Black";
  bg_ctx.fillRect(0, 0, 100, 100);

  const image1 = await createImageBitmap(bg_canvas);
  context.transferFromImageBitmap(image1);

  async function errorCodeHandler(errorCode) {
    // gfx::kCALayerSuccess = 0
    bg_ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (errorCode == 0) {
      console.log("CALayerOverlay is being used");
      bg_ctx.fillStyle = "DarkGreen";
      if (window.domAutomationController) {
        window.domAutomationController.send("SUCCESS");
      }
    } else {
      console.log("CALayerOverlay is not used. Error code:" , errorCode);
      bg_ctx.fillStyle = "Red";
      if (window.domAutomationController) {
        window.domAutomationController.send("FAILED");
      }
    }
    bg_ctx.fillRect(0, 0, 100, 100);
    const image = await createImageBitmap(bg_canvas);
    context.transferFromImageBitmap(image);
  }

  async function draw() {
    if (!chrome.gpuBenchmarking.addCoreAnimationStatusEventListener(errorCodeHandler)) {
      console.log("addCoreAnimationStatusEventListener fails!");
      if (window.domAutomationController) {
        window.domAutomationController.send("FAILED");
      }
    }
  }

  window.requestAnimationFrame(draw);
}

</script>
</head>
<body onload="main()">
<canvas id="canvas" width="100" height="100">
</body>
</html>
